<script setup>
	import { ref } from 'vue';
	const shopName = '莱卡（建大店）';
	const list = [
		{
			id:'1001',
			imgName:'img1',
			imgUrl:'/static/home-pic.jpg'
		},{
			id:'1002',
			imgName:'img2',
			imgUrl:'/static/laik.jpg'
		}
	];
	const isNo = true;
	const isComment = true;
	// const msgType = Ref('success');
	const alertDialog = ref(null);
	const share = ref(null);
	const dialogToggle = () => {
		// msgType.value = type
		alertDialog.value.open()
	};
	const dialogConfirm = () => {
		console.log('点击确认')
	};
	const dialogClose = () => {
		console.log('点击关闭')
	};
	const shareToggle = () => {
		share.value.open()
	};
	const gotoYuyue = () => {
		uni.navigateTo({
			url: '/pages/yuyue/yuyue'
		});
	}
</script>

<template>
	<view class="shop-main">
		<view class="shop-banner">
			<swiper class="banner" indicator-dots :circular="true" :autoplay="false" :interval="3000">
				<swiper-item v-for="item in list" :key="item.id">
					<image mode="aspectFill" class="image" :src="item.imgUrl"></image>
				</swiper-item>
			</swiper>
		</view>
	    
		<view class="shop-desc">
			<view class="shop-name-desc">
				<view class="shop-name">
					{{ shopName }}
				</view>
				<view class="shop-opentime" style="padding-top: 15px;">
					<i style="width: 15px;height: 15px;" class="iconfont">&#xe65d;</i>
					<span style="font-size: 15px;margin-left: 5px; ">营业时间：9:00 - 22:00（营业中）</span>
				</view>
				<view class="shop-address" style="padding-top: 15px;">
					<i style="width: 15px;height: 15px;" class="iconfont">&#x101ce;</i>
					<span style="font-size: 15px;margin-left: 5px;">店铺地址：历城区雪山路百替御园华府内</span>
				</view>
			</view>
			<view class="shop-icon">
				<view class="shop-fenxiang" @click="shareToggle">
					<image style="width: 25px;height: 25px;" src="../../static/fenxiang.png"></image>
					<span>分享</span>
				</view>
				<view class="shop-phone" style="padding-top: 35px;">
					<image style="width: 30px;height: 30px;" src="../../static/phone.png"></image>
				</view>
			</view>
		</view>
		<view class="shop-operate">
			<view v-if="!isNo" class="my-wait">
				<view class="my-wait-no">
					<span>排队人数</span>
					<span>11人</span>
				</view>
				<span style="font-size: 30px;color: #00c6a2;margin-left: 20px;">未取号</span>
			</view>
			<view v-else class="my-wait">
				<view class="my-wait-no">
					<span>等待人数</span>
					<span>11人</span>
				</view>
				<span style="font-size: 40px;color: #00c6a2;margin-left: 20px;">A011</span>
			</view>
			<view class="shop-qhyy" @click="dialogToggle()">
				<image style="width: 30px;height: 30px;" src="/static/quhao.png"></image>
				<span>取号</span>
			</view>
			<view class="shop-qhyy" @click="gotoYuyue">
				<image style="width: 30px;height: 30px;" src="/static/yuyue.png"></image>
				<span>预约</span>
			</view>
		</view>
		<view class="shop-comment">
			<view style="font-size: 20px;font-weight: 700;">评论(15)</view>
			<view v-if="isComment">
			    <view class="user-comment" style="margin-top: 10px;" v-for="i in 3" :key="i">
			        <view class="user-info">
			            <view style="width: 12%;">
			                <image
			                    style="width: 34px;height: 34px;border-radius: 50%;"
			                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
			                />
			            </view>
			            <view style="width: 63%;">昵称</view>
			            <view style="width: 25%;">2025/10/16</view>
			        </view>
			        <uni-rate size="18" :value="5" />
			        <view style="padding-top: 10px;padding-bottom: 10px;">
			            非常不错，支持一下！
			        </view>
			    </view>
			</view>
			<view class="empty" v-else>
				 <image src="../../static/mypd/empty.png" class="empty-img"></image>
				 <view class="uni-body">
				 	暂无数据
				 </view>
				<button class="loginbtn" type="submit" style="margin-bottom: 30rpx;">发布评论</button>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="success" title="取号成功" :showClose="false">
					<view style="padding: 10px;">
					    <view>您的号码是：</view>
					    <view style="font-size: 50px; font-weight: 1000; display: flex; justify-content: center;">A013</view>
					    <view>等待人数：<span style="font-size: 14px;">11</span>人</view>
					    <view>取号时间：<span style="font-size: 14px;">2025-01-17 15:09:22</span></view>
					    <view>温馨提示：<span style="font-size: 14px;">请提前到店等候，避免过号重排，当天有效，谢谢您的配合！</span></view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 分享示例 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share></uni-popup-share>
			</uni-popup>
		</view>
	</view>
</template>

<style lang="less">
.shop-main {
	display: flex;
	flex-direction: column;
	.shop-banner {
		// width: 100%;
		position: relative;
		// box-sizing: border-box;
		z-index: 1;
		.banner,
		.banner image{
			width: 750rpx;
			height: 500rpx;
		}
	}
	.shop-desc {
		width: 100%;
		height: auto;
		position: absolute;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background-color: white;
		top: 485rpx;
		z-index: 99;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		flex-direction: row;
		.shop-name-desc {
			display: flex;
			flex-direction: column;
			width: 92%;
			.shop-name {
				font-size: 50rpx;
				font-weight: 1000;
			}
		}
		.shop-icon {
			.shop-fenxiang {
				display: flex;
				flex-direction: column;
				font-size: 12px;
			}
		}
	}
	.shop-operate {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		position: absolute;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		background-color: white;
		top: 735rpx;
		margin-top: 5px;
		z-index: 99;
		.shop-wait {
			width: 60%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-weight: bold;
		}
		.my-wait {
			width: 60%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-weight: bold;
			.my-wait-no {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 20px;
			}
		}
		.shop-qhyy {
			width: 20%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		// .shop-yuyue {
		// 	width: 20%;
		// 	display: flex;
		// 	flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;
		// }
	}
	.shop-comment {
		width: 100%;
		height: auto;
		padding: 15px;
		box-sizing: border-box;
		position: absolute;
		border-radius: 20rpx;
		background-color: white;
		top: 895rpx;
		padding-bottom: 60px;
		.user-comment {
			background-color: rgb(243, 242, 242);
			border-radius: 15px;
			padding: 10px;
			.user-info {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}
		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			.empty-img {
				width: 200rpx;
				height: 200rpx;
			}
			.loginbtn {
				background-color: #00c8a4;
				margin: 30rpx 80rpx;
			}
		}
	}
}
</style>
